<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/login.css"/>
    <title>申报系统</title>
</head>
<body>
    <div class="wrap">
        <div class="loginText">
            <img src="img/logotext.png"/>
        </div>
        <div class="loginCont clearfix">
            <div class="oLeft">
                <img src="img/logincon.png"/>
            </div>
            <div class="oRight">
                <div class="loginWrap">
                    <p class="loginTitle">登录</p>
                    <div class="loginItem">
                        <img src="imgonghu.png"/>
                        <input type="text" id="userName" autocomplete="off" placeholder="请输入用户名"/>
                        <p class="error"></p>
                    </div>
                    <div class="loginItem">
                        <img src="imgima.png"/>
                        <input type="password" id="password" autocomplete="off" placeholder="请输入密码"/>
                        <p class="error"></p>
                    </div>
                    <div class="wjmm">
                        <a href="forget.html">忘记密码？</a>
                    </div>
                    <div class="btnWrap tip clearfix">
                        <p class="loginBtn" id="login" onclick="buttonChange() ">登 录</p>
                        <p class="registerBtn" id="register" onclick="buttonRegister()">注 册</p>
                    </div>
                    <div class="student-image" id="student-image" style="display:none;" onclick="getXY()">
                    	<img id="checkimg" src="">
                    	<div class="refreshdiv" onclick="refresh()">
                    		<img src="img/refresh.png"/>
                    	</div>
                    </div>
                    <div class="buttonSub" style="display:none;" onclick="getcheckImg()">
                        <span class="buttontext" id="imgText"></span>
                    </div>
                </div>
            </div>
        </div>
	</div>

    <script src="plugins/axios/axios.min.js"></script>
    <script>
        $(".loginItem").find("input").focus(function(){
            $(this).parent().css({"border":"1px solid #2394f2"})
        })
        $("#userName").blur(function(){
            if($(this).val().length != 0){
                $(this).parent().css({"border":"1px solid #2394f2"});
                $(this).parent().find(".error").text("");
            }else{
                $(this).parent().css({"border":"1px solid red"});
                $(this).parent().find(".error").text("*请输入用户名");
            }
		})
		$("#password").blur(function(){
            if($(this).val().length != 0){
                $(this).parent().css({"border":"1px solid #2394f2"});
                $(this).parent().find(".error").text("");
            }else{
                $(this).parent().css({"border":"1px solid red"});
                $(this).parent().find(".error").text("*请输入密码");
            }
        })
        function buttonChange() {



            document.getElementById("login").onclick =function (){

                axios({
                    method: 'post',
                    url: 'http://localhost:8080/user/login?username=' + document.getElementById("userName").value + '&password=' + document.getElementById("password").value,

                }).then(function (res) {


                        if(res.data.code === 1){
                            window.location.href="fillpage.html"
                        }else{
                            alert("用户名密码错误！")
                        }
                })

            }



        }

        function buttonRegister() {
            window.location.href="register.html"
        }
        function getcheckImg(){
            $('.student-image').show();
            $('.student-name-box').hide();
            $('.student-id-box').hide();
            $('.tip').hide();
        }
        function stopPropagation (e) {
            e = e || window.event;
            if(e.stopPropagetion) {
                e.stopPropagation();
            } else{
                e.cancelBubble = true;
            }
        }


    let api = Url1+"/api/dp/captcha/click";
	let apip = Url1+"/api/dp/captcha/validate/click"
	var token = '';
	getCheckData();
	function getCheckData() {
		let addimg1 = document.getElementsByClassName("addimg1");
		if(addimg1[0]){addimg1[0].parentNode.removeChild(addimg1[0])};
		let addimg2 = document.getElementsByClassName("addimg2");
		if(addimg2[0]){addimg2[0].parentNode.removeChild(addimg2[0])};
		let addimg3 = document.getElementsByClassName("addimg3");
		if(addimg3[0]){addimg3[0].parentNode.removeChild(addimg3[0])};
		let url = api;
		$.ajax({
			url:url,
			async: false,
			type:"GET",
			success:function(result){
				document.getElementById("imgText").innerHTML = "";
				// requestResult= result.information;
				text = result.data.text;
				img = result.data.href;
				token = result.data.token;
				// $("img#checkimg").append(img);
				document.getElementById("checkimg").src = img;
				$("#imgText").append("请依次点击（"+text.join(",")+"）");
			},
			error:function(err){
			},
		})
	}
	let num = 0;
	function refresh(){
		num = 0;
		getCheckData();
		stopPropagation();
	}
	let _code = [[],[],[]]
	function getXY(even) {
		num++
		//获得登入验证时点击的X,Y轴坐标
		let _x = event.offsetX;
		let _y = event.offsetY;
		let d_width = document.getElementById('checkimg').clientWidth;
		let d_height = document.getElementById('checkimg').clientHeight;
		//console.log(_x,d_width);
		_code[num - 1] = [_x / (d_width / 300), _y / (d_height / 150)];
		if(num == 1){
			let img = document.createElement('div');
			img.innerHTML = "1";
			img.style.position = "absolute";
			img.className = "addimg1"
			img.style.left = _x-12 + 'px';
			img.style.top = _y-12 + 'px';
			var refreshdiv=document.getElementsByClassName("refreshdiv")
			document.getElementsByClassName("student-image")[0].insertBefore(img,refreshdiv[0]);
		}

		if(num == 2){
			let img = document.createElement('div');
			img.innerHTML = "2";
			img.style.position = "absolute";
			img.className = "addimg2"
			img.style.left = _x-12 + 'px';
			img.style.top = _y-12 + 'px';
			var refreshdiv=document.getElementsByClassName("refreshdiv")
			document.getElementsByClassName("student-image")[0].insertBefore(img,refreshdiv[0]);
		}



		let res = 	{
			"code":{
				"1":_code[0],
				"2":_code[1],
				"3":_code[2],
			},
			"token": token,
		}
		if(num > 3) {
			alert("验证码不匹配")
			return;
		}
		if(num == 3 ){
			let img = document.createElement('div');
			img.innerHTML = "3";
			img.style.position = "absolute";
			img.className = "addimg3"
			img.style.left = _x-12 + 'px';
			img.style.top = _y-12 + 'px';
			var refreshdiv=document.getElementsByClassName("refreshdiv")
			document.getElementsByClassName("student-image")[0].insertBefore(img,refreshdiv[0]);
			let url = apip
			$.ajax({
				url:url,
				type:"POST",
				data:JSON.stringify(res),
				dataType: "json",
				contentType: "application/json",
				success:function(result){
					console.log(result);
					if(result.status == 1){
						//验证成功后的操作
						$('.submit_login').show();
						$('.buttonSub').hide();
						$('.student-image').hide();
						$('.student-name-box').show();
						$('.student-id-box').show();
                        $('.tip').show();
                        $('.loginItem').show();
                        $('.wjmm').show();
						//getLogin(result.data);
						getLogin(getYanZ());
					}else{
						alert(result.message);
						getCheckData();
					}

					num = 0;
					_code = [[],[],[]]
				},
				error:function(err){
					num = 0;
					_code = [[],[],[]
					]
				},
			})
		}
	}
	function getYanZ(){
		let a = '';
		$.ajax({
			type:'get',
			async:false,
			//url:'https://authcenter.citln.cn/home/getSalt',
			url:qklUrl+'/othercited/getSalt',
			success:function(res){
				if(res.status == 0){
					a = res.data;
				}
			}
		})
		return a;
	}
    function getLogin(captchaSign) {//形参为盐值
		if(!$('#userName').val() || !$('#password').val()){
			alert('用户名或密码不能为空');
			return;
		}
		var obj = {};
		obj.username = $('#userName').val();
		obj.password = SHA256_hash($('#userName').val()+SHA256_hash($('#password').val())+captchaSign);
		//obj.password = SHA256_hash($('#userName').val()+SHA256_hash($('#password').val())+'3f66297e85ab468a9535041b788b6c1b');
		obj.captchaSign = captchaSign;
		obj.setCookieURL = "http://fugong.citln.cn/setCookie?systemCode=P3_MANAGE_SYSTEM";
		obj.redirect_url = "http://www.secdps.com/qkl/fillpage.html";
		console.log(obj);
		var jsonStringify = JSON.stringify(obj);
		$.ajax({
			type: "POST",
			url: qklUrl+"/othercited/login",
			//url:"https://authcenter.citln.cn/auth/login",
			contentType: "application/json", //必须有
			dataType: "json", //表示返回值类型，不必须
			data: jsonStringify,
			success: function (result) {
				console.log(result);
				if(result.status == 0){
					if(result.data.token.length!=0){
						setCookie("token",result.data.token);
						window.location.href="fillpage.html";
					}else{
						window.location.href="fillpage.html";
					}
				}else{
					refresh();
					alert(result.message);
				}
			}
		});
	}
	//截取url字符串中的token参数
	function getvar(url,par){
		var urlsearch = url.split('?');
		pstr = urlsearch[1].split('&');
		for (var i = pstr.length - 1; i >= 0; i--) {
			var tep = pstr[i].split("=");
			if(tep[0] == par){
				return tep[1];
			}
		}
		return(false);
	}	
    </script>
</body>
</html>